:root {
    --bg: rgba(255, 255, 255);
    /* 背景颜色 */
    --back-bg: #c5ccda;
    /* 定义宽度 */
    --w: 100px;
    --back-shadow: #fff;
    /* 父容器gap间距 */
    --gap: 8px;
    /* 第二层圆形宽度 */
    --inner: calc(var(--w) - var(--gap));
    /* 文本颜色 */
    --text-color: #514f4f;
    /* 定义stroke的宽度 */
    --stroke: 12px;
    /* svg环形宽度 更正内容*/
    --circle: calc(var(--inner) - var(--stroke));
    /* 第三层圆形宽度 */
    --center: calc(var(--circle) - var(--stroke));
}


.mainHardware {
    width: 100%;
    display: flex;
    justify-content: space-around;
    // font-weight: 700;

    .container-box {
        width: var(--w);
        height: var(--w);
        position: relative;
    }

    /* 添加百分比显示文字 */
    .container-box::after {
        content: attr(data-num);
        position: absolute;
        font-size: 20px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: var(--text-color);
    }

    .circle-outer {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        // box-shadow: 6px 6px 8px var(--back-bg), -3px -3px 8px var(--back-shadow);
        background: var(--bg);
    }

    .circle-outer::before {
        width: var(--inner);
        height: var(--inner);
        box-shadow: inset 8px 8px 10px var(--back-bg),
            inset -4px -4px 8px var(--back-shadow);
    }

    .circle-outer::after {
        width: var(--center);
        height: var(--center);
        box-shadow: 6px 6px 8px var(--back-bg), -2px -2px 8px var(--back-shadow);
    }

    /* 合并代码 */
    .circle-outer::before,
    .circle-outer::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: var(--bg);
    }

    svg {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        transform: rotate(-90deg);
    }

    svg circle {
        cy: calc(var(--circle) / 2);
        cx: calc(var(--circle) / 2);
        r: calc(var(--circle) / 2);
        fill: none;
        /* 圆角 */
        stroke-linecap: round;
        position: absolute;
        --z: calc(var(--w) / 2);
        --c: calc(var(--circle) / 2);
        transform: translate(calc(var(--z) - var(--c)),
                calc(var(--z) - var(--c)));
        /* 圆的周长 */
        stroke-dasharray: calc(3.14 * var(--circle));
        stroke-dashoffset: calc(3.14 * var(--circle));
        stroke-width: var(--stroke);
    }

    article {
        width: 100px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;

        summary {
            font-size: 22px;
            margin-top: 5px;
        }

        p {
            font-size: 12px;
            color: #2f4f4f;
            white-space: nowrap;
            margin-top: 5px;
        }
    }

}